<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除缓存工具</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
            max-width: 600px;
            margin: 50px auto;
            padding: 20px;
            background: #f5f5f5;
        }
        .card {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            margin-top: 0;
        }
        .btn {
            display: block;
            width: 100%;
            padding: 15px;
            margin: 10px 0;
            background: #2d8cf0;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.3s;
        }
        .btn:hover {
            background: #1976d2;
        }
        .btn-danger {
            background: #e74c3c;
        }
        .btn-danger:hover {
            background: #c0392b;
        }
        .info {
            background: #e8f5e9;
            padding: 15px;
            border-radius: 5px;
            margin: 15px 0;
            border-left: 4px solid #4caf50;
        }
        .status {
            margin: 20px 0;
            padding: 15px;
            border-radius: 5px;
            font-weight: bold;
        }
        .success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .warning {
            background: #fff3cd;
            color: #856404;
            border: 1px solid #ffeaa7;
        }
        ul {
            margin: 10px 0;
            padding-left: 20px;
        }
        li {
            margin: 5px 0;
        }
    </style>
</head>
<body>
    <div class="card">
        <h1>🧹 清除缓存工具</h1>

        <div class="info">
            <strong>说明：</strong>如果修改代码后页面没有更新，请使用此工具清除缓存
        </div>

        <button class="btn btn-danger" onclick="clearAll()">
            🚀 一键清除所有缓存并刷新
        </button>

        <button class="btn" onclick="clearLocalStorage()">
            💾 清除LocalStorage
        </button>

        <button class="btn" onclick="clearSessionStorage()">
            📦 清除SessionStorage
        </button>

        <button class="btn" onclick="hardRefresh()">
            🔄 强制刷新页面
        </button>

        <div id="status"></div>

        <div class="info" style="margin-top: 30px;">
            <strong>当前缓存数据：</strong>
            <ul id="cacheInfo"></ul>
        </div>

        <div class="info">
            <strong>手动清除缓存方法：</strong>
            <ul>
                <li><strong>Windows/Linux：</strong>按 Ctrl + Shift + R</li>
                <li><strong>Mac：</strong>按 Cmd + Shift + R</li>
                <li><strong>完全清除：</strong>按 F12 → Application → Storage → Clear site data</li>
            </ul>
        </div>
    </div>

    <script>
        function showStatus(message, type = 'success') {
            const status = document.getElementById('status');
            status.className = 'status ' + type;
            status.textContent = message;
            setTimeout(() => {
                status.style.display = 'none';
            }, 3000);
            status.style.display = 'block';
        }

        function updateCacheInfo() {
            const info = document.getElementById('cacheInfo');
            const keys = Object.keys(localStorage);
            if (keys.length === 0) {
                info.innerHTML = '<li>暂无缓存数据</li>';
            } else {
                info.innerHTML = keys.map(key => {
                    const value = localStorage.getItem(key);
                    const size = new Blob([value]).size;
                    return `<li><strong>${key}</strong> (${size} bytes)</li>`;
                }).join('');
            }
        }

        function clearLocalStorage() {
            const count = localStorage.length;
            localStorage.clear();
            showStatus(`✅ 已清除 ${count} 个 LocalStorage 项`, 'success');
            updateCacheInfo();
        }

        function clearSessionStorage() {
            const count = sessionStorage.length;
            sessionStorage.clear();
            showStatus(`✅ 已清除 ${count} 个 SessionStorage 项`, 'success');
        }

        function hardRefresh() {
            showStatus('🔄 正在强制刷新...', 'warning');
            setTimeout(() => {
                location.reload(true);
            }, 500);
        }

        function clearAll() {
            const lsCount = localStorage.length;
            const ssCount = sessionStorage.length;

            localStorage.clear();
            sessionStorage.clear();

            showStatus(`✅ 已清除所有缓存（LocalStorage: ${lsCount}, SessionStorage: ${ssCount}），即将刷新页面...`, 'success');

            setTimeout(() => {
                location.reload(true);
            }, 1500);
        }

        // 页面加载时显示缓存信息
        updateCacheInfo();
    </script>
</body>
</html>
